<!--
 * 地图
 * @author junpeng.li
 * @date 2024-11-26 16:18
-->
<script setup lang="ts" name="Layout">
import type { VectorType } from './map/Map'
import Map from './map/Map.vue'

const mapRef = useTemplateRef<InstanceType<typeof Map>>('mapRef')
const mapObj = computed(() => mapRef.value?.map)
const zoom = ref(15)
const minZoom = ref(2)
const maxZoom = ref(18)
const rotation = ref(-84)
const position = ref({ lng: 116.59454, lat: 40.07677 })
const vectorType = ref<VectorType>('None')
const selectedLayers = ref<string[]>([])
const layers = computed(() => {
  if (!mapObj.value) {
    return []
  }

  const list = mapObj.value.layers.value.map(item => {
    const id = item.get('id')
    const name = item.get('name') ?? '未命名的图层'
    return {
      id,
      name
    }
  })
  selectedLayers.value = list.map(item => item.id)
  return list
})
function handleLayersChange(ids: string[]) {
  layers.value.forEach(item => {
    mapObj.value?.getLayer(item.id)?.setVisible(ids.includes(item.id))
  })
}
</script>

<template>
  <div class="layout-container">
    <Map
      ref="mapRef"
      class="map-side"
    />
    <div class="right-side">
      <p>设置地图缩放级别：</p>
      <ElRow :gutter="10">
        <ElCol :span="5">
          <ElButton
            type="primary"
            @click="mapObj!.zoomIn()"
          >
            放大地图
          </ElButton>
        </ElCol>
        <ElCol :span="5">
          <ElButton
            type="primary"
            @click="mapObj!.zoomOut()"
          >
            缩小地图
          </ElButton>
        </ElCol>
        <ElCol :span="14">
          <ElInput
            v-model="zoom"
            placeholder="设置缩放等级"
          >
            <template #append>
              <ElButton @click="mapObj.setZoom(+zoom)">设置</ElButton>
            </template>
          </ElInput>
        </ElCol>
      </ElRow>

      <p>设置缩放级别的最小值和最大值：</p>
      <ElRow :gutter="10">
        <ElCol :span="8">
          <ElInput
            v-model="minZoom"
            placeholder="设置最小缩放等级"
          ></ElInput>
        </ElCol>
        <ElCol :span="8">
          <ElInput
            v-model="maxZoom"
            placeholder="设置最大缩放等级"
          ></ElInput>
        </ElCol>
        <ElCol :span="8">
          <ElButton
            type="primary"
            @click="mapObj.setZoomRange({ min: +minZoom, max: +maxZoom })"
          >
            设置
          </ElButton>
        </ElCol>
      </ElRow>

      <p>设置地图的旋转角度：</p>
      <ElRow :gutter="10">
        <ElCol :span="8">
          <ElInput
            v-model="rotation"
            placeholder="设置旋转角度"
          ></ElInput>
        </ElCol>
        <ElCol :span="8">
          <ElButton
            type="primary"
            @click="mapObj.setRotation(+rotation)"
          >
            设置
          </ElButton>
        </ElCol>
      </ElRow>

      <p>定位：</p>
      <ElRow :gutter="10">
        <ElCol :span="8">
          <ElInput
            v-model="position.lng"
            placeholder="设置经度"
          ></ElInput>
        </ElCol>
        <ElCol :span="8">
          <ElInput
            v-model="position.lat"
            placeholder="设置纬度"
          ></ElInput>
        </ElCol>
        <ElCol :span="8">
          <ElButton
            type="primary"
            @click="mapObj.setCenter(position)"
          >
            设置
          </ElButton>
        </ElCol>
      </ElRow>

      <p>绘制几何图形：</p>
      <ElRow :gutter="10">
        <ElCol :span="16">
          <ElSelect
            v-model="vectorType"
            @change="() => mapObj?.drawVector(vectorType)"
          >
            <ElOption
              v-for="item in ['None', 'Point', 'LineString', 'Polygon', 'Circle']"
              :key="item"
              :value="item"
              :label="item"
            />
          </ElSelect>
        </ElCol>
      </ElRow>

      <p>图层列表：</p>
      <ElRow
        :gutter="10"
        style="margin-left: 0"
      >
        <ElCheckboxGroup
          v-model="selectedLayers"
          @change="handleLayersChange"
        >
          <ElCheckbox
            v-for="layer in layers"
            :key="layer.id"
            :value="layer.id"
            :label="layer.name"
          ></ElCheckbox>
        </ElCheckboxGroup>
      </ElRow>
    </div>
  </div>
</template>

<style scoped lang="scss">
.layout-container {
  width: 100vw;
  height: 100vh;
  display: flex;

  .map-side {
    flex: 1;
  }

  .right-side {
    flex-shrink: 0;
    width: 500px;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}
</style>
